<template>
  <div class="mine">
    <div class="content">
      <h2>饿了么</h2>
      <div class="head">
        <div class="left">
          <div class="headImg">
            <img
              src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F01%2F20200801153540_tcnlj.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669469336&t=173add20e2eb37257729f81721f4f61a"
              alt=""
            />
          </div>
          <div class="account">
            <span>{{ userinfo.id }}</span>
            <span>{{ userinfo.phone | phone }}</span>
          </div>
        </div>
        <div class="set">退出登录</div>
      </div>
      <div class="card">
        <div>
          <i>白金会员</i>
          <span>到期日期：</span>
          <span>2023-10-20</span>
        </div>
        <p>升级超级吃货卡，每月得无门槛红包，下单5倍返回吃货豆</p>
      </div>
      <div class="wallet">
        <div class="left">
          <van-icon name="label" />
          <span class="hh">红包</span>
          <p>8个待使用</p>
        </div>
        <div class="right">
          <van-icon name="bookmark" />
          <span class="hh">卡包</span>
          <p>查看会员卡</p>
        </div>

        <div class="right">
          <van-icon name="label" />
          <span class="hh">券包</span>
          <p>查看我的券</p>
        </div>
      </div>
      <div class="tool">
        <h2>常用工具</h2>
        <div class="tool_card">
          <div
            v-for="(item, index) in cardList"
            :key="index"
            @click="$router.push(item.to)"
          >
            <van-icon :name="item.icon" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <div class="tool">
        <h2>我的钱包</h2>
        <div class="tool_card">
          <div
            v-for="(item, index) in cardTow"
            :key="index"
            @click="$router.push(item.to)"
          >
            <van-icon :name="item.icon" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <div class="service">
        <div class="cash">
          <p>邀请好友赚现金</p>
          <span>最高得15元</span>
          <div class="cashImg">
            <img src="@/assets/images/mine_03.png" alt="" />
          </div>
          <div class="btn">
            <span>去邀请</span>
            <span>查佣金</span>
          </div>
        </div>
        <div class="cash">
          <p>唯一公众号</p>
          <span>关注后及时接收系统通知</span>
          <div class="cashImg">
            <img src="@/assets/images/mine_05.png" alt="" />
          </div>
          <div class="btn">
            <span>立即关注</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userinfo: JSON.parse(localStorage.getItem("userinfo"))
        ? JSON.parse(localStorage.getItem("userinfo"))
        : {},
      cardList: [
        {
          icon: "location-o",
          name: "我的地址",
          to: "/home",
        },
        {
          icon: "service-o",
          name: "我的客服",
          to: "/home",
        },
        {
          icon: "like-o",
          name: "店铺关注",
          to: "/collection",
        },
        {
          icon: "star-o",
          name: "评价有礼",
          to: "/home",
        },
      ],
      cardTow: [
        {
          icon: "like-o",
          name: "我的钱包",
          to: "/home",
        },
        {
          icon: "location-o",
          name: "借钱",
          to: "/home",
        },
        {
          icon: "location-o",
          name: "外卖红包",
          to: "/home",
        },
      ],
    };
  },
  filters: {
    phone(vla) {
      return vla.slice(0, 3) + "****" + vla.slice(-5, -1);
    },
  },
};
</script>

<style scoped lang="scss">
.mine {
  background-color: #f5f5f5;
  overflow: hidden;
  .content {
    margin: 0 0.2667rem;
    h2 {
      font-size: 0.64rem;
      margin: 0.4rem 0;
      font-weight: bold;
      color: #1989fa;
    }
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        .headImg {
          width: 1.6rem;
          height: 1.6rem;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .account {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 1.6rem;
          margin-left: 0.2667rem;
          span:first-child {
            font-size: 0.5333rem;
            font-weight: bold;
          }
          span:last-child {
            font-size: 0.3733rem;
            color: #ccc;
          }
        }
      }
      .set {
        font-size: 0.48rem;
        border: 0.0267rem solid #999;
        border-radius: 0.5333rem;
        padding: 0.08rem 0.2133rem;
        background: lightcyan;
      }
    }
    .card {
      background-color: #1989fa;
      border-radius: 0.2667rem;
      margin-top: 0.4rem;
      box-sizing: border-box;
      padding: 0.2667rem;
      div {
        margin-bottom: 0.2667rem;
        color: white;
        i {
          padding-right: 0.4rem;
          border-right: 0.0267rem solid #f5f5f5;
        }
        span:nth-child(2) {
          padding-left: 0.4rem;
          font-size: 0.4267rem;
        }
      }
      p {
        font-size: 0.32rem;
        color: #eee;
      }
    }
    .wallet {
      background-color: white;
      margin-top: 0.2667rem;
      border-radius: 0.2667rem;
      padding: 0.2667rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .left,
      .right {
        text-align: center;
        color: 0.4267rem;
        i {
          color: red;
        }
        span {
          font-size: 0.5333rem;
        }
        p {
          font-size: 0.3733rem;
          margin-top: 0.2667rem;
          color: #999;
        }
      }
    }
    .tool {
      margin: 0.2667rem 0;
      background-color: white;
      box-sizing: border-box;
      overflow: hidden;
      padding: 0 0.2667rem 0.2667rem;
      border-radius: 0.2667rem;
      h2 {
        font-size: 0.48rem;
        margin-top: 0.2667rem;
      }
      .tool_card {
        display: flex;
        justify-content: space-around;
        div {
          display: flex;
          flex-direction: column;
          align-items: center;
          i {
            font-size: 0.64rem;
            font-weight: bold;
            margin-bottom: 0.2667rem;
          }
          span {
            font-size: 0.3733rem;
          }
        }
      }
    }
    .service {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2667rem;
      .cash {
        box-sizing: border-box;
        width: 49%;
        background-color: white;
        border-radius: 0.2667rem;
        padding: 0.2667rem;
        p {
          font-weight: bold;
          font-size: 0.45rem;
          color: #000;
        }
        span {
          font-size: 0.3733rem;
          color: #999;
        }
        .cashImg {
          background-color: #f5f5f5;
          border-radius: 0.2667rem;
          padding: 0.5333rem;
          margin: 0.2667rem 0;
          display: flex;
          img {
            margin: auto;
            width: 1.3333rem;
          }
        }
        .btn {
          text-align: center;
          span {
            font-size: 0.4rem;
            border: 0.0267rem solid #ccc;
            padding: 0.1333rem 0.2667rem;
            border-radius: 0.4rem;
            margin: 0 0.1333rem;
          }
        }
      }
    }
  }
}
.hh {
  font-weight: bold;
  margin-left: 5px;
}
</style>